import React from 'react'
import { Routes, Route,useRoutes } from 'react-router-dom'
import Login from './components/Login'
import System from './components/System'
import Addstu from './components/System/Addstu'
import Updatestu from './components/System/Update'
// export default function router() {
//     return (
//         <Routes>
//             <Route path='/login' element={<Login />} />
//             <Route path='*' element={<h1>找不到！！！</h1>} />
//             <Route index element={<Login />} />
//             <Route path='/system' element={<System />}>
//                 <Route index element={<Addstu/>}/>
//                 <Route path='addstu' element={<Addstu/>}/>
//                 <Route path='upsatestu' element={<Updatestu/>}/>
//             </Route>
//         </Routes>
//     )
// }

    //以下是声明式路由的配置方式______useRoutes
    //实际操作中通常使用这种方式动态生成路由
 export default  () => {
        return useRoutes([
            {
                path:'/login',
                element:<Login/>
            },{
                path:'',
                element:<Login/>
            },{
                path:'*',//用于匹配路径找不到的情况，可以是一个组件
                element:<h1>找不到！！！！</h1>
            },{
                // path:'/system/:name',//传递过来的params参数要接收
                path:'/system',
                element:<System/>,
                children:[
                    {
                        path:'',
                        element:<Addstu/>
                    },{
                        path:'addstu',
                        element:<Addstu/>
                    },{
                        path:'upsatestu',
                        element:<Updatestu/>
                    }
                ]
            }
        ])
    }


